<template>
  <view class="banner-swiper-box">
    <view class="banner-swiper-box2">
      <canvas canvas-id="colorThief" class="hide-canvas"></canvas>
      <swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true"
        :indicator-dots="false">
        <swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item">
          <image class="swiper-image" :src="item.pic" @click="goRoll(item)" mode="aspectFill" lazy-load></image>
        </swiper-item>
      </swiper>
      <!-- <view class="banner-swiper-dots">
        <text
          :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
          v-for="(dot, index) in detail.length"
          :key="index"
        >
        </text>
      </view> -->
    </view>
  </view>
</template>

<script>
// import colorThief from 'miniapp-color-thief';

export default {
  data () {
    return {
      swiperCurrent: 0, //轮播下标
      webviewId: 0,
    };
  },
  props: {
    detail: {
      type: Array,
      default: [],
    },
  },
  created: async function () {
    await this.doColorThief();
  },
  computed: {},
  methods: {
    async doColorThief () {
      let that = this;
      // 获取轮播图
      let item = this.detail[this.swiperCurrent];
      // 获取轮播图颜色
      let bgcolor = item.color || "#1a6874";
      // 颜色不存在
      if (!bgcolor) {
        //#c40414
        //1a6874
        that.$set(item, "bgcolor", "#c40414");
        that.$emit("getbgcolor", "#c40414");
      } else {
        that.$set(item, "bgcolor", bgcolor);
        that.$emit("getbgcolor", bgcolor);
      }
    },
    swiperChange (e) {
      this.swiperCurrent = e.detail.current;
      this.doColorThief();
      let bgcolor = this.detail[this.swiperCurrent].bgcolor;
      this.$emit("getbgcolor", bgcolor);
    },

    // 路由跳转
    goRoll (item) {
      if (item.uniapp_url) {
        this.$yrouter.push(item.uniapp_url);
      }
    },
  },
};
</script>

<style lang="less">
// 轮播
.banner-swiper-box {
  background: #ffffff;
  padding: 0rpx 24rpx 16rpx;
}

.banner-swiper-box2 {
  height: 240rpx;

  border-radius: 16rpx !important;
  overflow: hidden;
  box-sizing: border-box;
}

.banner-swiper-box,
.banner-carousel {
  height: 256rpx;
  position: relative;

  .carousel-item {
    width: 100%;
    height: 100%;
    // padding: 0 28upx;
    overflow: hidden;
  }

  .swiper-image {
    border-radius: 16rpx;
    width: 100%;
    height: 100%;
    // border-radius: 10upx;
    // background: #ccc;
  }
}

.banner-swiper-dots {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20rpx;
  z-index: 5;

  .banner-dot {
    width: 14rpx;
    height: 14rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    margin-right: 10rpx;
  }

  .banner-dot-active {
    width: 14rpx;
    height: 14rpx;
    background: #FF5900;
    border-radius: 50%;
    margin-right: 10rpx;
  }
}

.hide-canvas {
  position: fixed !important;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}

::v-deep .banner-swiper-box .swiper-image,
.banner-carousel .swiper-image {
  height: calc(100% - 16rpx) !important;
  border-radius: 16rpx !important;
}

::v-deep .banner-swiper-box,
.banner-carousel {
  border-radius: 16rpx !important;
  overflow: hidden !important;
}
</style>
